<template>
  <div v-if="transFeeTemplateId" class="temp-detail">

    <div style="margin: 5px 0 0px 0;" class="temp-detail-title">运费项</div>
    <el-table :data="form.transFeeItemList" border style="width: 100%;" class="table-con" >
      <el-table-column header-align="center" align="center" width="400" label="配送区域">
        <template slot-scope="scope">
          <span v-if="scope.row.deliveryScope == 1">全国(所有地区)</span>
          <span v-else>
            <el-tag v-for="city in scope.row.cityList" :key="city.id" style="margin:3px 3px 0 0;">{{city.areaName}}</el-tag>
          </span>
        </template>
      </el-table-column>
      <el-table-column header-align="center" align="center" prop="firstPiece" :label="tableTitle[0]" />
      <el-table-column header-align="center" align="center" prop="firstFee" :label="tableTitle[1]" />
      <el-table-column header-align="center" align="center" prop="continuousPiece" :label="tableTitle[2]"/>
      <el-table-column header-align="center" align="center" prop="continuousFee" :label="tableTitle[3]" />
    </el-table>

    <div v-if="form.hasFreeCondition && form.isFreeFee == 0"  class="temp-detail-title" style="margin: 10px 0 0px 0;">指定条件包邮区域</div>
    <el-table :data="form.transFreeList" border style="width: 100%;" v-if="form.hasFreeCondition && form.isFreeFee == 0" >
      <el-table-column header-align="center" align="center" width="400" label="包邮区域">
        <template slot-scope="scope">
          <span v-if="!scope.row.cityList || !scope.row.cityList.length" style="margin-right: 3px;">请选择条件包邮区域</span>
          <span v-else>
            <el-tag v-for="city in scope.row.cityList" :key="city.areaId" style="margin: 3px 3px 0 0;">{{city.areaName}}</el-tag>
          </span>
        </template>
      </el-table-column>
      <el-table-column header-align="center" align="center" prop="freeTypeDictText" label="条件分类" />
      <el-table-column header-align="center" align="left" label="包邮条件">
        <template slot-scope="scope">
          <div v-if="scope.row.freeType == 1 || scope.row.freeType == 2" >
            满 {{scope.row.amount}} 元包邮
          </div>
          <div v-if="scope.row.freeType == 0 || scope.row.freeType == 2">
            满 {{scope.row.piece}} 件/kg/m³包邮
          </div>
        </template>
      </el-table-column>
    </el-table>

  </div>

</template>

<script>
export default {
  name: "TransFeeTempDetail",
  props:{
    transFeeTemplateId:{
      type: String,
      require: true
    }
  },
  data() {
    return {
      form : {
        chargeType: 0,
        isFreeFee: 0,
        hasFreeCondition: 0,
        transFeeItemList: [{ cityList: [], deliveryScope : 1}],
        transFreeList: [{ cityList: [] }]
      },
      url: {
        base: '/mall/transFeeTemplate/'
      },
      // 表单校验
    };
  },
  watch:{
    transFeeTemplateId: {
      immediate: true,
      handler(val){
        if(val){
          this.$httpGet(this.url.base + val).then(res=>{
            this.form = res.data;
          })
        }
      }
    }
  },
  computed: {
    tableTitle () {
      var titles = [['首件(个)', '运费(元)', '续件(个)', '续费(元)'], ['首重(kg)', '运费(元)', '续重(kg)', '续费(元)'], ['首体积(m³)', '运费(元)', '续体积(m³)', '续费(元)']]
      if (this.form.chargeType) {
        return titles[this.form.chargeType]
      }
      return titles[0]
    }
  },
  created() {
  },
  methods: {

  },
}
</script>

<style scoped>
  .temp-detail{
    padding: 0px 10px 10px 10px;
    border: 1px #dcdfe6 solid;
    border-radius: 8px;
  }
  .temp-detail-title{
    font-weight: bold;
    text-align: center;
  }
</style>
